<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url(./bucket.css);

        #cesiumContainer {
            position: absolute;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div style="z-index:9999;position: absolute;top: 20px;left: 20px;">
    <input class="draw" type="radio" name="draw" value="0" checked="checked">贴地形
    <input class="draw" type="radio" name="draw" value="1">空间
</div>
<div style="z-index:9999;position: absolute;top: 50px;left: 20px;">
    <button id="point">画点</button>
    <button id="line">画线</button>
    <button id="polygon">画面</button>
    <button id="elevation">量高</button>
    <button id="mpoint">m画点</button>
    <button id="mline">m画线</button>
    <button id="mpolygon">m画面</button>
    <button id="melevation">m量高</button>
    <button id="remove">移除</button>
</div>
<div id="cesiumContainer"></div>
<script src="../Build/CesiumUnminified/Cesium.js"></script>
<script src="../plugins/CesiumMeasure.min.js"></script>
<script>
    const viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker : true,
        selectionIndicator:false,
        infoBox:false,
        orderIndependentTranslucency:false
    });
    viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: '//assets02.agi.com/stk-terrain/world',
        requestWaterMask: true,
        requestVertexNormals: true
    });

    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url : 'https://beta.cesium.com/api/assets/1459?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNjUyM2I5Yy01YmRhLTQ0MjktOGI0Zi02MDdmYzBjMmY0MjYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NTldLCJpYXQiOjE0OTkyNjQ3ODF9.SW_rwY-ic0TwQBeiweXNqFyywoxnnUBtcVjeCmDGef4'
    }));

//    var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({
//        url : 'https://beta.cesium.com/api/assets/1458?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYmJiNTAxOC1lOTg5LTQzN2EtODg1OC0zMWJjM2IxNGNlYmMiLCJpZCI6NDQsImFzc2V0cyI6WzE0NThdLCJpYXQiOjE0OTkyNjM4MjB9.1WKijRa-ILkmG6utrhDWX6rDgasjD7dZv-G5ZyCmkKg'
//    }));

    tileset.readyPromise.then(function() {
        var boundingSphere = tileset.boundingSphere;
        viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius * 2));
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }).otherwise(function(error) {
        throw(error);
    });

    viewer.scene.globe.depthTestAgainstTerrain = true;
    const tool = new Cesium.DrawTool({
        viewer:viewer,
        isMeasure:true,  // 是否开启测量模式
        isClampGround:true,  // 是否开启贴地模式
//        lineWidth:1.0    // 设置线宽
    });
    document.getElementById('point').onclick = function() {
        tool.startPoint()  // 画点
    };
    document.getElementById('line').onclick = function() {
        tool.startPolyline()  // 画线
    };
    document.getElementById('polygon').onclick = function() {
        tool.startPolygon();  // 画面
    };
    document.getElementById('elevation').onclick = function() {
        tool.startElevation();  // 量高
    };

    document.getElementById('mpoint').onclick = function() {
        tool.startModelPoint() // 模型画点
    };
    document.getElementById('mline').onclick = function() {
        tool.startModelPolyline()  // 模型画线
    };
    document.getElementById('mpolygon').onclick = function() {
        tool.startModelPolygon();  // 模型画面
    };
    document.getElementById('melevation').onclick = function() {
        tool.startModelElevation();  // 模型量高
    };

    document.getElementById('remove').onclick = function() {
        tool.destory()
    };

    const radios = document.getElementsByName('draw');
    for(let item of radios){
        item.onclick = function() {
            if(item.checked && item.value == 0){
                tool.setIsClampGround(true)  // 设置是否开启贴地模式
            }else{
                tool.setIsClampGround(false)
            }
        }
    }


</script>
</body>
</html>
